<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表单</title>
</head>
<body>
    <p>HTML表单可以将一组信息提交到指定的位置。例如登录网站时输入的用户名和密码，或使用搜索引擎时输入的你要搜索的内容。</p>

    <hr>

    <form action="#">
        <p>input 标签可以创建一个元素用于输入内容</p>
        <p>type 属性可以设置 input 标签的类型，type="text" 可以设置一个文本输入框：</p>
        <input type="text">
        <p>placeholder 属性可以设置文本输入框中的提示内容：</p>
        <input type="text" placeholder="请输入内容">
        <p>value 属性可以设置文本输入框中的默认内容：</p>
        <input type="text" value="默认内容">

        <br><br><!-- 这里使用两个 br 换行为了好看 -->

        <p>下面模拟一个登录页面：</p>
        <label for="username">用户名：</label>
        <input type="text" id="username" placeholder="请输入用户名">
        <label for="password">密码：</label>
        <input type="password" id="password" placeholder="请输入密码">
        <p>label 标签可以为文本输入框创建一个标签，label 标签中的 for 属性可以使用 input 标签中的 id 属性将 label 标签与 input 标签关联起来</p>
        <p>input 标签中 type="password" 表示这是一个密码输入框，输入的内容不会以明文的形式展示出来</p>

        <br>

        <p>input 标签中 type="radio" 可以创建一个单选项选择框：</p>
        <span>请选择性别：</span>
        <input type="radio" name="gender" id="male"><label for="male">男</label>
        <input type="radio" name="gender" id="female"><label for="female">女</label>
        <p>在单选项选择框中，name 属性相同的单选项选择框中只能有一个被选中</p>

        <br>

        <p>input 标签中 type="checkbox" 可以创建一个多选项选择框：</p>
        <span>请选择您的爱好：</span>
        <input type="checkbox" name="hobby" id="sing"><label for="sing">唱歌</label>
        <input type="checkbox" name="hobby" id="dance"><label for="dance">跳舞</label>
        <input type="checkbox" name="hobby" id="rap"><label for="rap">rap</label>
        <input type="checkbox" name="hobby" id="basketball"><label for="basketball">打篮球</label><!-- 卤出鸡脚了 -->

        <br><br><!-- 这里使用两个 br 换行为了好看 -->

        <p>input 标签中 type="submit" 可以创建一个提交按钮，用于提交表单中的信息：</p>
        <input type="submit">
        <p>使用 value 属性可以自定义提交按钮中的文字：</p>
        <input type="submit" value="点我上传信息">
    </form>

    <hr>

    <p>表单中的信息将会被提交到 form 标签中 action 属性指定的位置上，action="#"代表不提交至任何位置</p>
</body>
</html>